import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Layout } from 'antd';
import Menu from './Menu';

const SiderBar = (props) => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout.Sider
      collapsible
      collapsed={collapsed}
      onCollapse={(val) => setCollapsed(val)}
    >
      {props.logoComp}
      {props.menuList.length && <Menu list={props.menuList} />}
    </Layout.Sider>
  );
};

SiderBar.propTypes = {
  logoComp: PropTypes.element,
  menuList: PropTypes.arrayOf(PropTypes.object),
};

export default SiderBar;
